<template>
  <div class="content_box">
    <div class="head">
      <div class="hea_cont">
      <!-- <div class="head_box" :style="{height:navBarHeight+'px'}">
        <div :style="{height:statusBarHeight+'px'}"></div>
        <div class="titleBar" :style="{height:titleBarHeight+'px'}">
          <p class="icon" @click="back">
            <van-icon name="arrow-left" color="#fff" size="24"/>
          </p>
          <p class="title">订单详情</p>
          <p class="icon"></p>
        </div>
      </div> -->
    
      <div class="top_box">
       <div class="star_cont">
         <div class="star_l">{{showTmie.b_time}}</div>
         <div class="star_r">{{showTmie.b_date}}</div>
       </div>
       <div class="star_mid">
         <p>共计{{msg.serviceTime}}个小时</p>
         <p>—————————</p>
       </div>
       <div class="star_cont">
         <div class="star_l">{{showTmie.e_time}}</div>
         <div class="star_r">{{showTmie.e_date}}</div>
       </div>
      </div>
      </div>
      <div class="roomDetail">
        <p  class="TimeLin">{{msg.storeName}}</p>
        <div class="time_cont">
          <div class="cont_img" >
            <!-- <img :src="msg.roomImg[0]" alt="" srcset=""> -->
            <van-image
                widthFix
                width="100%"
                height="100%"
                lazy-load
                :src="msg.roomImg"
              />
          </div>
         
          <div class="time_right">
            <p class="r1">{{msg.roomName}}</p>
            <p class="text"><img style="width:38rpx" class="icon" mode="widthFix" src="/static/images/room/money.png" alt="" /><span style="color:#FB1821">{{msg.price/100}}&nbsp;</span>/小时</p>
            <p class="text"><img style="width:38rpx" class="icon" mode="widthFix" src="/static/images/room/training.png" alt="" />设备正常</p>
            <p class="text dz"><img style="width:38rpx" class="icon" mode="widthFix" src="/static/images/room/map.png" alt="" />地址：<span class="adr">{{msg.address}}</span></p>
          </div>
        </div>
      </div>
       <!-- <div class="maNumber" v-if="msg.orderTotalState == 1||msg.orderTotalState == 0">
        <p class="m1" v-if="lockPas">{{lockPas}}</p>
        <p class="m1" v-else>******</p>
        <p class="m2">密码有效期为5分钟，失效后点击刷新密码</p>
        <div class="tool">
          <div class="t0">
             <img src="/static/images/reload.png" alt="" srcset="">
          </div>
          <p class="t1" @click="getPass(msg)">刷新密码</p>
        </div>
      </div> -->
      
      <div class="list" v-if="msg.orderTotalState == 7">
        <div class="box">
          <p class="title">最低消费2小时</p>
          <p class="text">{{isLowConsume==0?'满足':'不满足'}}</p>
        </div>
        <div class="box">
          <p class="title">消费时长</p>
          <p class="text">{{msg.consumeTime}}</p>
        </div>
        <div class="box">
          <p class="title">消费金额</p>
          <p class="text">{{msg.consumeSum/100}}</p>
        </div>
        <div class="box">
          <p class="title">剩余时常</p>
          <p class="text">{{msg.remainTime}}</p>
        </div>
        <div class="box">
          <p class="title">退款金额</p>
          <p class="text">{{msg.refundAmount/100}}</p>
        </div>
      </div>
    
      <div class="list">
        <!-- <div class="box">
          <p class="title">服务时间</p>
          <p class="text">{{msg.year}} {{msg.startTime}}-{{msg.endTime}}</p>
        </div> -->
        <div class="box">
          <p class="title">下单时间</p>
          <p class="text">{{msg.createTime}}</p>
        </div>
        <div class="box">
          <p class="title">订单金额</p>
          <p class="text">￥{{msg.totalPrice}}</p>
        </div>
        <div class="box">
          <p class="title">支付方式</p>
          <p class="text">微信支付</p>
        </div>
        <div class="box">
          <p class="title">服务时长</p>
          <p class="text">共{{msg.serviceTime}}个小时</p>
        </div>
        <div class="box">
          <p class="title">订单编号 </p>
          <p class="text">{{msg.id}}</p>
        </div>
        <div class="box">
          <p class="title">服务地址 </p>
          <p class="text">{{msg.address}}</p>
        </div>
      </div>
      <div class="order_zw"></div>
        </div>
     <!-- <div class="foot_box"> -->
        <!--基础操作-->
        <!-- <block>
         <div class="foot_qx" v-if="msg.orderTotalState == 1" @click="earlyEnd(msg.id)">提前结束</div>
         <div class="foot_qx" v-if="msg.orderTotalState == 2" @click="toStoreDetail(msg.storeId)">再次下单</div>
         <div class="foot_qx" v-if="msg.orderTotalState == 0" @click.stop="cancelOrder(msg.id)">取消订单</div>
         <div class="foot_km" v-if="msg.orderTotalState == 1" @click="getPass(msg)">直接开门</div>
         <div class="foot_km" v-if="msg.orderTotalState == 1" @click="getXudan(msg)">续单</div>
         <div class="reason_box1" v-if="msg.orderTotalState == 3">已取消订单</div> -->
         <!--提前结束、满足低消--> 
        <!-- <div class="reason_box" v-if="msg.orderTotalState == 7&&msg.isLowConsume==0">已退款，请注意查收</div> -->
         
         <!--提前结束、不满足低消--> 
        <!-- <div class="reason_box" v-if="msg.orderTotalState == 7&&msg.isLowConsume==1">已退款（不满足低消标准，已按最低消费比例扣款）,请注意查收</div> -->
        
         <!--提前取消、大于1小时--> 
        <!-- <div class="reason_box" v-if="msg.orderTotalState == 6&&msg.gtStartTime==0">已退款（申请时间距订单开始时间大于60分钟，已按订单金额*6%扣除服务费）,请注意查收</div> -->
         <!--提前取消、小于1小时--> 
        <!-- <div class="reason_box" v-if="msg.orderTotalState == 6&&msg.gtStartTime==1">已退款（申请时间距订单开始时间小于60分钟，已按订单金额*10%扣除服务费）,请注意查收</div> -->
        <!--主动退款--> 
        <!-- <div class="reason_box" v-if="msg.orderTotalState == 8">平台已全额退款,请注意查收</div> -->
        <!-- </block> -->
     <!-- </div> -->
  </div>
</template>

<script>
// import { getMyOrderDetails,cancelMyOrder,endUseOrder } from "@/api/index";
import { minTime } from "@/utils"
export default {
  data() {
    return {
      statusBarHeight: "", // 状态栏高度
      titleBarHeight: "", // 标题栏高度
      navBarHeight: "", // 导航栏总高度
      msg:{},
      lockPas:null,
      showTmie:{
        b_date:0,
        b_time:0,
        e_date:0,
        e_time:0,
      }

    };
  },
  methods: {
    earlyEnd(orderId){
      const that=this
      wx.showModal({
     title: '提示',
     content: '亲，提前结束不会全额退款哦~',
     confirmText:'确认结束',
     success: function (res) {
       if (res.confirm) {//这里是点击了确定以后
       endUseOrder({orderId}).then(res=>{
              if(res.statusCode == '00000'){
                that.getXq(orderId)
              }
            })
       }else{
         console.log('取消')
       }
     }
   })
    },
       // 取消订单
    cancelOrder(orderId){
      const _this = this
      wx.showModal({
        title: '提示',
        content: '提前取消平台会依据房间预订详情中的相应条款收取费用，确认取消该订单？',
        success (res) {
          if (res.confirm) {
            cancelMyOrder({orderId}).then(res=>{
              if(res.statusCode == '00000'){
                _this.getXq(orderId)
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    // 跳转店铺详情
    toStoreDetail(id){
      wx.navigateTo({
        url: `/pages/xq/main?id=${id}`,
      });
    },

    // 续单
    getXudan(msg){
      console.log(msg)
      let storeName = msg.storeName
      let info = [
        {
          endTime:msg.endTime,
          orderId:msg.id,
          price:msg.price,
          roomId:msg.id,
          roomName:msg.roomName,
          serviceTime:msg.serviceTime,
          startTime:msg.startTime
        }
      ]
      wx.navigateTo({
        url: `/pages/renewalOrder/main?list=${JSON.stringify(info)}&name=${storeName}`,
      });
    },

     // 获取密码
    getPass(e){
      console.log(e)
      wx.showLoading({title: '加载中…'})
      getLockPassword({orderId:e.id}).then(res=>{
        console.log(res)
        if(res.statusCode == '00000'){
          wx.hideLoading()
         this.lockPas=res.data.password
        }else{
          wx.hideLoading()
          wx.showToast({
            title:res.message ,
            icon: 'none',
            duration: 2000,
          })
        }
      })
    },

    //返回上一页
    back(){
      wx.navigateBack({//返回
        delta: 1
      })
    },
    getShow(n,t){
      if(!t) return t
      switch (n) {
        case 1:
          return `${new Date(t).getMonth()<9?`0${new Date(t).getMonth()+1}`:new Date(t).getMonth()+1}/${new Date(t).getDate()<10?`0${new Date(t).getDate()}`:new Date(t).getDate()}`
          break;
          case 2:
          return `${new Date(t).getHours()<10?`0${new Date(t).getHours()}`:new Date(t).getHours()}:${new Date(t).getMinutes()<10?`0${new Date(t).getMinutes()}`:new Date(t).getMinutes()}`
          break;
      
        default:
          break;
      }

    },

    //获取订单详情
    getXq(orderId){
      getMyOrderDetails({
        orderId:orderId||"639741050025304064"
        }).then(res=>{
        if(res.statusCode == '00000'){
          // let start = ''
          // let end = ''
          // res.data.year = res.data.startTime.split(" ")[0]
          // start = res.data.startTime.split(" ")[1].split(":")
          // end = res.data.endTime.split(" ")[1].split(":")
          // res.data.startTime = `${start[0]}:${start[1]}`
          // res.data.endTime = `${end[0]}:${end[1]}`
          res.data.startTime= res.data.startTime.replace(/-/g,'/')
          res.data.endTime= res.data.endTime.replace(/-/g,'/')
          res.data.consumeTime=minTime(res.data.consumeTime)
          res.data.remainTime=minTime(res.data.remainTime)
          // res.data.serviceTime=minTime(res.data.serviceTime)
          res.data.totalPrice = (res.data.totalPrice/100).toFixed(2)
          res.data.serviceTime = (res.data.serviceTime/60).toFixed(2)
          this.msg = res.data
          this.showTmie={
            b_date:this.getShow(1,res.data.startTime),
            b_time:this.getShow(2,res.data.startTime),
            e_date:this.getShow(1,res.data.endTime),
            e_time:this.getShow(2,res.data.endTime),
          }
          console.log( this.msg)
          // console.log( '-------------')
        }
      })
    }
  },
  beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        console.log(`system:`, system);
        self.statusBarHeight = system.statusBarHeight;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      },
    });
  },
  onLoad(options) {
    this.getXq(options.id)
  },
};
</script>

<style lang="scss" scoped>
.content_box {
  min-height: 100vh;
  background: #f5f5f5;
  .foot_box{
    width: 100%;
    height: 70px;
    position: fixed;
    background: #fff;
    bottom: 0;
    
    display: flex;
    justify-content: flex-end;
    align-items: center;
     .reason_box1{
      width: 690rpx;
      height: 50px;
      margin: 0 auto;
      // background: #E6EAEB;
      // border-radius: 50rpx;
      line-height: 50px;
      font-family: PingFang SC;
      font-style: normal;
      font-weight: bold;
      font-size: 30rpx;
      /* identical to box height, or 100% */
      text-align: center;
      color: #B1B5BE;

    }
    .reason_box{
      width: 690rpx;
      height: 50px;
      margin: 0 auto;
      // background: #E6EAEB;
      // border-radius: 50rpx;
      // line-height: 90rpx;
      font-family: PingFang SC;
      font-style: normal;
      font-weight: bold;
      font-size: 30rpx;
      /* identical to box height, or 100% */
      text-align: center;
      color: #B1B5BE;

    }
    .foot_qx{
     width: 200rpx;
     height: 40px;
     line-height: 40px;
      text-align: center;
      color: #666666;
      border:1px solid #CCCCCC;
      border-radius: 10rpx;
      margin-right: 15px;
    }
    .foot_km{
      width: 200rpx;
     height: 40px;
     line-height: 40px;
      text-align: center;
      color: #fff;
      border:1px solid #1499ff;
      background: #1499ff;
      border-radius: 10rpx;
      margin-right: 15px;
    }
    .foot_sh{
       width: 200rpx;
      height: 40px;
      line-height: 40px;
        text-align: center;
       color: #B1B5BE;
       background: #E6EAEB;
      border-radius: 10rpx;
      margin-right: 15px;
    }
  }
 
  .hea_cont{
    height: 250rpx;
    // background: linear-gradient(to right, #35c982, #3de3a3);
    background: linear-gradient(to right, #2daeff, #1499ff);
    .titleBar{
      width: 96%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin:0 auto;
      .icon{
        width: 100rpx;
      }
      .title{
        width: 50%;
        text-align: center;
        color:#fff;
        font-size:32rpx;
        font-weight: bold;
      }
    }

    .top_box{
      width: 70%;
      display: flex;
      margin: 0 auto;
      padding-top: 20px;
      // margin:50rpx auto 0px auto;
      // flex-direction: column;
      justify-content: center;
      align-items: center;
      justify-content: space-between;
      color:#fff;
      .top1{
        color:#fff;
        font-size:50rpx;
        font-weight: bold;
      }
      .star_mid{
        color:#fff;
        font-size:24rpx;
        text-align: center;
      }
      .star_cont{
        display: flex;
        flex-direction: column;
        align-items: center;
        .star_l{
          color:#fff;
          font-size:50rpx;
          font-weight: bold;
        }
        .star_r{
          display: flex;
          flex-direction: column;
          align-items: center;
          color:#fff;
          font-size:30rpx;
          margin-left: 5px;
        }
      }
     
    }
      }
    .roomDetail{
      width: 92%;
      // height: 250rpx;
      border-radius: 20rpx;
      margin: -35px auto 0 auto;
      background: #fff;
      text-align: center;
      .TimeLin{
        color:#333;
        font-size: 32rpx;
        font-weight: bold;
        padding-top:30rpx;
        text-align: left;
        margin-left: 10px;
      }
      .time_cont{
        display: flex;
        justify-content: space-between;
        // align-items: center;
        padding: 10px;
         .cont_img{
           width: 100px;
           height: 100px;
           border-radius: 5rpx;
          //  background: chocolate;
          //  overflow: hidden;
           /deep/ .van-image__img {
          border-radius: 10rpx;
        }
           img{
             width: 100%;
             height: 100%;
           }
         }
         .time_right{
           width: 70%;
           margin-left: 20rpx;
           text-align: left;
           .r2{
             font-size: 28rpx;
             color: #999;
             margin: 3px auto;
           }
           .text{
            font-size:28rpx;
            color:#999;
            margin:10rpx auto;
            position: relative;
            display: flex;
            align-items: center;
            .adr{
                width: 280rpx;
                display: inline-block;
                 text-overflow:ellipsis;
                white-space:nowrap;
                overflow:hidden;
              }
            .icon{
              width: 30rpx;
              margin-right:5rpx;
            }
            &.dz{
              display: flex;
              align-items: center;
              // justify-content: space-between;
            }
          }
         }
      }
      
      .TimeLin2{
        color:#333;
        font-size: 34rpx;
        // font-weight: bold;
        padding-top:20rpx;
      }
      .timeTy{
         color:#333;
         font-size: 28rpx;
         padding-top:30rpx;
      }
      // width:;
    }
    .maNumber{
      width: 92%;
      height: 250rpx;
      border-radius: 20rpx;
      margin: 15px auto;
      background: #fff;
      text-align: center;
      .m1{
        color:#333;
        font-size: 45rpx;
        font-weight: bold;
        padding-top:30rpx;
      }
      .m2{
        color:#999999;
        font-size: 25rpx;
      }
      .tool{
        width: 200rpx;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1rpx solid #999999;
        border-radius: 10rpx;
        padding: 4px;
        .t0{
          width: 38rpx;
          height: 38rpx;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .t1{
          // background:#1499ff;
          // padding: 6px 10px;
          text-align: center;
          color:#999999;
          margin-left: 7rpx;
        }
      }
    }
    .order_zw{
      width: 100%;
      height: 90px;
    }
  
  .list{
    width: 85%;
    margin:0 auto;
    padding:15rpx 30rpx;
    background: #fff;
    border-radius: 20rpx;
    margin-top:20rpx;
    .box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64rpx;
      font-size:28rpx;
      .title{
        color:#333;
      }
      .text{
        color:#999
      }
    }
  }
  
}
</style>